<template>
  <div class="home-container">
    
    <keep-alive>
  	 <router-view v-transition></router-view>
    </keep-alive>
    <div class="click-change" v-if="!ok"> 
      <button class="click-change-left click-change-button" @click="back">{{ left }}</button>
      <button class="click-change-right click-change-button" @click="next">{{ right }}</button>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  name: 'home',
  props:{
      ok: Boolean
  },
  data: function () {
  	return {
  		eqid: this.$route.params.eqid,
      left: '<<',
      right: '>>',
  	}
  },
  created: function () {
  	this.seteqid(this.eqid);
  },
  methods: {
    back() {
      switch (this.$route.name) {
            case 'default':
            case 'seismicinfo':
                this.$router.push({
                    name: 'nearfz'
                })
                break
            case 'weatherinfo':
                this.$router.push({
                    //name: 'seismicinfo'
                    name: 'thd'
                })
                break
            case 'populationinfo':
                this.$router.push({
                    name: 'weatherinfo'
                })
                break
            case 'economicinfo':
                this.$router.push({
                    name: 'populationinfo'
                })
                break
            case 'environmeninfo':
                this.$router.push({
                    name: 'economicinfo'
                })
                break
            case 'thd':
                this.$router.push({
                    name: 'seismicinfo'
                    //name: 'environmeninfo'
                })
                break
            case 'nearfz':
                this.$router.push({
                    name: 'environmeninfo'
                    //name: 'thd'
                })
                break
            }
    },
    next() {
      switch (this.$route.name) {
           	case 'default':
            case 'seismicinfo':
            	this.$router.push({
                    name: 'thd'
                    //name: 'weatherinfo'
                })
            	break
            case 'weatherinfo':
                this.$router.push({
                    name: 'populationinfo'
                })
                break
            case 'populationinfo':
                this.$router.push({
                    name: 'economicinfo'
                })
                break
            case 'economicinfo':
            	this.$router.push({
                    name: 'environmeninfo'
                })
            	break
            case 'environmeninfo':
                this.$router.push({
                    name: 'nearfz'
                    //name: 'thd'
                })
                break
            case 'thd':
                this.$router.push({
                    name: 'weatherinfo'
                    //name: 'nearfz'
                })
                break
            case 'nearfz':
                this.$router.push({
                    name: 'seismicinfo'
                })
                break
            }
    },
  	...mapMutations(['seteqid'])
  }
}
</script>

<style>
.click-change {
  margin-top: -100%;
  opacity: 0.5;
  animation:appear_vanish 3s;
  animation-iteration-count:10000000;
}
@keyframes appear_vanish
  {
    from   {opacity: 0.1;}
    to     {opacity: 0.5;}
  }
.click-change-button {
    background-color: #e2dede; /* Green */
    border: none;
    color: black;
    /* padding: 15px 32px; */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 0;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
}
.click-change-left {
    float: left;
}
.click-change-right {
    float: right;
}
</style>